<template>
    <div class="the-select">
        <div
            class="the-select-item"
            v-for="(item, index) in options"
            :key="index"
            :class="{ active: value.includes(+item.value) }"
            @click="handlerClick(item)"
        >
            <img :src="item.selectIcon" alt="" />
            <span>{{ item.name }}</span>
        </div>
    </div>
</template>

<script>
import { MonitorMap } from "@/view/client/component/TheCesiumMap/data";

const options = Object.entries(MonitorMap).map(([key, item]) => ({
    value: key,
    ...item,
}));
export default {
    name: "TheSelect",
    props: {
        value: {
            type: Array,
            default() {
                return [];
            },
        },
        monitorTypes: Array
    },
    data() {
        return {};
    },
  computed:{
    options() {
      return options.filter(item=> this.monitorTypes.includes(item.value))
    }
  },
    methods: {
        handlerClick(item) {
            const index = this.value.findIndex((value) => +item.value === value);
            if (index === -1) {
                this.$emit("input", this.value.concat(+item.value));
            } else {
                this.$emit(
                    "input",
                    this.value.filter((value) => +item.value !== value),
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.the-select {
    position: absolute;
    left: 1.25rem;
    top: .5rem;
    width: .8rem;
    z-index: 1;
}
.the-select-item {
    display: flex;
    align-items: center;
    height: .19rem;
    font-size: .08rem;
    color: #ffffff;
    background: url("~@/asset/image/select-active.png") no-repeat left top/ 100% 100%;
    cursor: pointer;
    opacity: 0.5;
    &.active {
        opacity: 1;
    }
    img {
        width: .125rem;
        height: .125rem;
        margin: 0 .075rem;
    }
}
</style>
